<template>
  <div style="min-height: 100vh; background: #f5f5f5;">
    <!-- 顶部标题 -->
    <header style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 60px 20px; text-align: center;">
      <h1 style="font-size: 3em; margin: 0 0 15px 0;">⚡ Nuxt 4 首屏优化实战</h1>
      <p style="font-size: 1.3em; margin: 0 0 20px 0; opacity: 0.95;">真实电商首页对比，直观感受优化的巨大价值</p>
      <NuxtLink to="/seo-compare" style="display: inline-block; background: rgba(255,255,255,0.2); color: white; padding: 12px 30px; border-radius: 25px; text-decoration: none; font-weight: bold; border: 2px solid rgba(255,255,255,0.5); transition: all 0.3s; margin-top: 10px;">
        🔍 为什么 SSR 对 SEO 更好？
      </NuxtLink>
    </header>

    <div style="max-width: 1200px; margin: 0 auto; padding: 40px 20px;">
      <!-- 对比演示区域 -->
      <section style="margin-bottom: 60px;">
        <h2 style="text-align: center; font-size: 2.5em; margin-bottom: 40px; color: #333;">
          🎯 三种体验方式
        </h2>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
          <!-- 未优化版本 -->
          <div style="background: white; padding: 35px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 3px solid #ff6b6b;">
            <div style="text-align: center; margin-bottom: 25px;">
              <div style="font-size: 5em; margin-bottom: 15px;">🐌</div>
              <h3 style="margin: 0 0 10px 0; color: #ff6b6b; font-size: 1.8em;">未优化版本</h3>
              <p style="color: #999; font-size: 1em; margin: 0;">传统方式，体验有多慢</p>
            </div>
            
            <div style="background: #fff5f5; padding: 20px; border-radius: 10px; margin-bottom: 25px;">
              <h4 style="margin: 0 0 15px 0; color: #ff6b6b;">存在的问题：</h4>
              <ul style="list-style: none; padding: 0; margin: 0; color: #666; line-height: 2.2;">
                <li>❌ 客户端渲染（CSR）</li>
                <li>❌ 串行请求数据</li>
                <li>❌ 无图片优化</li>
                <li>❌ 空白加载页面</li>
                <li>❌ 无懒加载策略</li>
              </ul>
            </div>

            <div style="background: #f8f8f8; padding: 15px; border-radius: 8px; margin-bottom: 25px;">
              <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span style="color: #666;">首屏时间：</span>
                <span style="color: #ff6b6b; font-weight: bold;">~2-3秒</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span style="color: #666;">图片体积：</span>
                <span style="color: #ff6b6b; font-weight: bold;">~5-10MB</span>
              </div>
            </div>

            <NuxtLink to="/shop-slow" style="display: block; background: linear-gradient(135deg, #ff6b6b, #ee5a6f); color: white; text-align: center; padding: 15px; border-radius: 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; transition: transform 0.3s;">
              🧪 体验慢速版本
            </NuxtLink>
          </div>

          <!-- 优化版本 -->
          <div style="background: white; padding: 35px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 3px solid #4caf50; position: relative;">
            <div style="position: absolute; top: -15px; right: 20px; background: linear-gradient(135deg, #ffd700, #ffed4e); color: #333; padding: 8px 20px; border-radius: 20px; font-weight: bold; font-size: 0.9em;">⭐ 推荐</div>
            
            <div style="text-align: center; margin-bottom: 25px;">
              <div style="font-size: 5em; margin-bottom: 15px;">🚀</div>
              <h3 style="margin: 0 0 10px 0; color: #4caf50; font-size: 1.8em;">优化版本</h3>
              <p style="color: #999; font-size: 1em; margin: 0;">最佳实践，飞一般的速度</p>
            </div>
            
            <div style="background: #f1f8f4; padding: 20px; border-radius: 10px; margin-bottom: 25px;">
              <h4 style="margin: 0 0 15px 0; color: #4caf50;">优化技术：</h4>
              <ul style="list-style: none; padding: 0; margin: 0; color: #666; line-height: 2.2;">
                <li>✅ SSR 服务端渲染</li>
                <li>✅ 并行请求优化</li>
                <li>✅ NuxtImg 图片优化</li>
                <li>✅ 骨架屏 + 懒加载</li>
                <li>✅ 首屏优先策略</li>
              </ul>
            </div>

            <div style="background: #f8f8f8; padding: 15px; border-radius: 8px; margin-bottom: 25px;">
              <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                <span style="color: #666;">首屏时间：</span>
                <span style="color: #4caf50; font-weight: bold;">~300-500ms</span>
              </div>
              <div style="display: flex; justify-content: space-between;">
                <span style="color: #666;">图片体积：</span>
                <span style="color: #4caf50; font-weight: bold;">~500KB-1MB</span>
              </div>
            </div>

            <NuxtLink to="/shop-fast" style="display: block; background: linear-gradient(135deg, #4caf50, #45a049); color: white; text-align: center; padding: 15px; border-radius: 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; transition: transform 0.3s;">
              ⚡ 体验极速版本
            </NuxtLink>
          </div>

          <!-- 性能对比 -->
          <div style="background: white; padding: 35px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 3px solid #667eea;">
            <div style="text-align: center; margin-bottom: 25px;">
              <div style="font-size: 5em; margin-bottom: 15px;">📊</div>
              <h3 style="margin: 0 0 10px 0; color: #667eea; font-size: 1.8em;">性能对比</h3>
              <p style="color: #999; font-size: 1em; margin: 0;">详细的技术解析</p>
            </div>
            
            <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 25px;">
              <h4 style="margin: 0 0 15px 0; color: #667eea;">性能提升：</h4>
              <div style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                  <span style="color: #666;">首屏时间：</span>
                  <span style="color: #4caf50; font-weight: bold;">↓ 70-80%</span>
                </div>
                <div style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
                  <div style="width: 80%; height: 100%; background: linear-gradient(90deg, #4caf50, #45a049);"></div>
                </div>
              </div>
              <div style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                  <span style="color: #666;">传输体积：</span>
                  <span style="color: #4caf50; font-weight: bold;">↓ 85-90%</span>
                </div>
                <div style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
                  <div style="width: 90%; height: 100%; background: linear-gradient(90deg, #4caf50, #45a049);"></div>
                </div>
              </div>
              <div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                  <span style="color: #666;">加载速度：</span>
                  <span style="color: #4caf50; font-weight: bold;">↑ 5-10倍</span>
                </div>
                <div style="width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
                  <div style="width: 95%; height: 100%; background: linear-gradient(90deg, #4caf50, #45a049);"></div>
                </div>
              </div>
            </div>

            <NuxtLink to="/shop-compare" style="display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 15px; border-radius: 10px; text-decoration: none; font-weight: bold; font-size: 1.1em; transition: transform 0.3s;">
              📈 查看详细对比
            </NuxtLink>
          </div>
        </div>
      </section>

      <!-- 测试建议 -->
      <section style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); padding: 40px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); text-align: center;">
        <h2 style="font-size: 2.2em; margin: 0 0 20px 0; color: white;">💡 最佳测试方式</h2>
        <div style="background: rgba(255,255,255,0.95); padding: 30px; border-radius: 15px; max-width: 800px; margin: 0 auto;">
          <ol style="text-align: left; line-height: 2.5; color: #333; font-size: 1.1em; margin: 0;">
            <li><strong>打开浏览器开发者工具</strong>（按 F12 键）</li>
            <li><strong>切换到 Network 面板</strong></li>
            <li><strong>选择网络限速</strong>：选择 "Slow 3G" 或 "Fast 3G"</li>
            <li><strong>先访问未优化版本</strong>，感受加载的痛苦 😫</li>
            <li><strong>再访问优化版本</strong>，体验飞一般的速度 🚀</li>
          </ol>
          <div style="background: #fff3cd; padding: 15px; border-radius: 8px; margin-top: 20px; border-left: 4px solid #ffc107;">
            <p style="margin: 0; color: #856404; font-weight: bold;">
              ⚠️ 提示：慢速网络下对比效果更明显！
            </p>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: 'Nuxt 4 首屏优化实战演示',
  meta: [
    { name: 'description', content: '通过真实电商首页对比，展示 Nuxt 4 首屏优化的最佳实践' }
  ]
})
</script>

